<template>
  <div class="quick_search">
    <div class="quick_search_title">
      <div @click="changeTitle(item.id)" :class="{active_title:titleChange === item.id}" v-for="item in twoHouseBuild">{{item.title}}</div>
    </div>
    <div class="quick_search_content">
        <div class="quick_area">
          <div class="pay">区域:</div>
          <div v-if="quickArea" :class="{hidden:areaHidden === true}" class="label">
            <div v-if="cityNameArea.CODE.length === 6" @click="getArea(cityNameArea.CODE)">{{cityNameArea.region_name_c}}</div>
            <div v-else @click="getArea(item.CODE)" v-for="item in quickArea">{{item.region_name_c}}</div>

          </div>
          <div>
            <div :class="{rotate_area:areaHidden === false}">
              <span @click="areaMore" class="iconfont icon-xiala"></span>
            </div>
          </div>
        </div>
        <div class="quick_price">
          <div class="pay">价格:</div>
          <div :class="{hidden:priceHidden === true}" class="label"  v-show="titleChange === 1">
            <div @click="getPay(item.value)" v-for="item in priceArea">{{item.title}}</div>
          </div>
          <div :class="{hidden:priceHidden === true}" class="label"  v-show="titleChange === 2">
            <div @click="getPay(item.value)" v-for="item in premisesPrice">{{item.title}}</div>
          </div>
          <div>
            <div :class="{rotate_area:priceHidden === false}">
              <span @click="priceMore" class="iconfont icon-xiala"></span>
            </div>
          </div>
        </div>
      <div class="quick_price" v-show="titleChange === 1">
        <div class="pay">房型:</div>
        <div :class="{hidden:huxingHidden === true}" class="label">
          <div @click="getHuxing(item.value)" v-for="item in huxingArray">{{item.title}}</div>
        </div>
        <div>
          <div :class="{rotate_area:huxingHidden === false}">
            <span @click="huxingMore" class="iconfont icon-xiala"></span>
          </div>
        </div>
      </div>
        <div class="quick_kaifa">
          <div class="pay">开发商:</div>
          <div :class="{hidden:developersHidden === true}" class="label">
            <div @click="getDevelopers(item)" v-for="item in developersArray">{{item}}</div>
          </div>
          <div>
            <div :class="{rotate_area:developersHidden === false}">
              <span @click="developersMore" class="iconfont icon-xiala"></span>
            </div>
          </div>
        </div>
        <div class="label_array">
          <div :style="randomRgb()" @click="getTypeId(item.id)" v-for="item in labelArray">{{item.title}}</div>
        </div>
      </div>
  </div>
</template>

<script>
  import {houseSelectData} from '../axios/api';
  import {getCityName} from '../assets/js/cache';

  export default {
    name: 'QuickSearch',
    data() {
      return {
        twoHouseBuild: [
          {
            title: '快捷找楼盘',
            id: 2
          },
          {
            title: '快捷找房',
            id: 1
          }],
        cityNameArea:'',
        titleChange: 2,
        areaHidden: true,
        priceHidden: true,
        developersHidden: true,
        huxingHidden:false,
        quickArea: [],
        premisesPrice:[],
        priceArea: [],
        labelArray: [],
        huxingArray:[],
        developersArray: ['碧桂园', '融创', '富力', '鲁能', '万科']
      }
    },
    created() {
      this.getSelectData();
      this.cityNameArea = getCityName();
    },
    methods: {
      //路由跳转
      changeRouterLink(){
        if(this.titleChange === 1){
          this.$router.push({name: 'TwoHouse'});
        }else {
          this.$router.push({name: 'LookBuild'});
        }
      },
      //更换组件
      changeTitle(id){
        this.titleChange = id;
      },
      //区域点击跳转
      getArea(code) {
        let areaCode = code.substr(0,6);
        console.log(areaCode);
        console.log(code);
        if (this.titleChange === 1){
          this.$store.commit('setHouseArea', areaCode);
        } else {
          this.$store.commit('setHouseAreaNew', areaCode);
        }

        this.changeRouterLink();
      },
      //价格
      getPay(value) {
        let arrPay = value.split('-');
        let valueMin = arrPay[0];
        let valueMax = arrPay[1];
        if (this.titleChange === 1){
          this.$store.commit('setHousePayMin', valueMin);
          this.$store.commit('setHousePayMax', valueMax);
        } else {
          this.$store.commit('setHousePayMinNew', valueMin);
          this.$store.commit('setHousePayMaxNew', valueMax);
        }

        this.changeRouterLink();
      },
      //开发商
      getDevelopers(value) {
        if (this.titleChange === 1){
          this.$store.commit('setHouseDevelopers', value);
        } else {
          this.$store.commit('setHouseDevelopersNew', value);
        }

        this.changeRouterLink();
      },
      //房源类型
      getTypeId(id) {
        if (this.titleChange === 1){
          this.$store.commit('setHouseType', id);
        } else {
          this.$store.commit('setHouseTypeNew', id);
        }

        this.changeRouterLink();
      },

      areaMore() {
        this.priceHidden = true;
        this.developersHidden = true;
        this.huxingHidden = true;
        this.areaHidden = !this.areaHidden;
      },
      //户型
      getHuxing(id){
        if (this.titleChange === 1){
          this.$store.commit('setHouseHuxing', id);
        } else {
          this.$store.commit('setHouseHuxingNew', id);
        }

        this.changeRouterLink();
      },
      huxingMore(){
        this.areaHidden = true;
        this.developersHidden = true;
        this.priceHidden = true;
        this.huxingHidden = !this.huxingHidden;
      },
      priceMore() {
        this.areaHidden = true;
        this.developersHidden = true;
        this.huxingHidden = true;
        this.priceHidden = !this.priceHidden;
      },
      developersMore() {
        this.areaHidden = true;
        this.priceHidden = true;
        this.huxingHidden = true;
        this.developersHidden = !this.developersHidden;
      },
      randomRgb: function() {
        let R = Math.floor(Math.random() * 255);
        let G = Math.floor(Math.random() * 255);
        let B = Math.floor(Math.random() * 255);
        return {
          color: 'rgb(' + R + ',' + G + ',' + B + ')',
          borderColor: 'rgb(' + R + ',' + G + ',' + B + ')',
          borderWidth: '1px',
          borderStyle: 'solid'
        };
      },
      //获取下拉数据
      getSelectData() {
        houseSelectData(getCityName().CODE).then(res => {
          this.quickArea = res.data.area;
          this.priceArea = res.data.price;
          this.labelArray = res.data.houseType;
          this.huxingArray = res.data.ht_room_num;
          this.premisesPrice = res.data.premisesPrice;
        }).catch(err => {
          console.log(err)
        })
      }
    },
    watch: {
      '$route'(to, from) {
        if (to.name === 'Index') {
          this.getSelectData();
        }
        // if(from.name === 'NewHouseDetails'){
        //
        // }
      }
    }

  }
</script>

<style scoped>
  .quick_search {
    padding: 10px;
  }

  .quick_search .quick_search_title {
    display: flex;
    justify-content: space-between;
  }

  .quick_search .quick_search_title > div {
    padding: 5px;
    border: 1px solid #eee;
    border-radius: 5px;
    width: 50%;
    margin-right: 10px;
    text-align: center;
    font-size: 0.8rem;
  }

  .quick_search .quick_search_content {
    margin-top: 10px;
  }

  .quick_search .quick_search_content .quick_area {
    display: flex;
    justify-content: space-between;
  }

  .quick_search .quick_search_content .quick_area .pay {
    /*width: 28% !important;*/
    /*width: 1000px;*/
    color: #999;
    margin-right: 10px;
    flex: 1;
    line-height: 1.5rem;
  }

  .quick_search .quick_search_content .quick_area .label {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.5rem;
    font-size: 0.9rem;
    width: 75%;
  }



  .quick_search .quick_search_content .quick_area .label > div {
    margin: 0 5px;
  }

  .quick_search .quick_search_content .quick_price {
    display: flex;
    justify-content: space-between;
  }

  .quick_search .quick_search_content .quick_price .pay {
    /*width: 28% !important;*/
    color: #999;
    line-height: 1.5rem;
  }

  .quick_search .quick_search_content .quick_price .label {

  }

  .quick_search .quick_search_content .quick_price .label > div {
    margin: 0 5px;
  }

  .quick_search .quick_search_content .quick_kaifa {

  }

  .quick_search .quick_search_content .quick_kaifa {
    display: flex;
    justify-content: space-between;
  }

  .quick_search .quick_search_content .quick_kaifa .pay {
    /*width: 25% !important;*/
    color: #999;
    line-height: 1.5rem;
  }

  .quick_search .quick_search_content .quick_kaifa .label {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.5rem;
    font-size: 0.9rem;
  }

  .quick_search .quick_search_content .quick_kaifa .label > div {
    margin: 0 5px;
  }

  .quick_search .quick_search_content .quick_developers {
    display: flex;
  }

  .quick_search .quick_search_content .quick_developers .pay {
    /*width: 100px;*/
    color: #999;
  }

  .quick_search .quick_search_content .quick_developers .label {
    display: flex;
    flex-wrap: wrap;
  }

  .quick_search .quick_search_content .quick_developers .label > div {
    margin: 0 5px;
  }

  .quick_search .quick_search_content .label_array {
    display: flex;
    flex-wrap: wrap;
  }

  .quick_search .quick_search_content .label_array > div {
    padding: 3px 10px;
    /*border: 1px solid #e6191e;*/
    margin: 5px 10px 5px 0;
    border-radius: 5px;
    font-size: 0.8rem;
  }

  .hidden {
    overflow: hidden;
    height: 23px;
  }

  .rotate_area {
    transform: rotate(180deg);
    transition: All 0.4s ease-in-out;
  }
  .label {
    display: flex;
    flex-wrap: wrap;
    line-height: 1.5rem;
    font-size: 0.9rem;
    width: 70%;
    text-align: left;
  }
</style>
